<template>
    <div class="ellipsis">
        <div class="ellipsis-content1">
            css单行注释
            这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，
        </div>
        <div class="ellipsis-content2">
            css 多行注释
            这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，
        </div>
        <div class="ellipsis-content3">
            css 多行注释 --row
            这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，
        </div>
        <div class="ellipsis-content3" style="--row: 5">
            css 多行注释 --row
            这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，这是一段特别长的内容，
        </div>
    </div>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <div class="shan"></div>
    <div class="square"></div>
</template>
<script setup lang="ts">
const num = '123tr'
console.log('isNan', isNaN(num))
console.log(Number.isNaN(num));
console.log(Number(num));

const arr = [1, '2', 3, 4]
/* for (const key in object) {
    if (Object.prototype.hasOwnProperty.call(object, key)) {
        const element = object[key];
        
    }
} */
</script>
<style lang="scss" scoped>
.ellipsis {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    // overflow: hidden;
    & > div {
        align-content: baseline;
        // float: left;
        margin: 0 0 20px 20px;
        height: fit-content;
        width: 300px;
        border: 1px solid black;
    }
    // 省略一行
    .ellipsis-content1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    // 多行省略
    .ellipsis-content2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ellipsis-content3 {
        --row: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: var(--row);
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
ul {
    // display: flex;
    li {
        // display: inline;
        list-style: none;
        background-color: #f00;
    }
}
.shan {
    width: 40px;
    border-width: 20px;
    border-style: solid;
    border-radius: 20px 20px 0 0;
    border-color: #f00 transparent transparent transparent;
}
.square {
    width: 20%;
    height: 0;
    padding-top: 20%;
    background: orange;
}
</style>
